<template>
	<view class="profile-container">

		<!-- 头像设置 -->
		<view class="avatar-section">
			<text class="section-title">头像</text>
			<view class="avatar-container" @click="chooseAvatar">
				<image class="user-avatar" :src="getImageUrl(formData.avatar) || '/static/avatar/default.png'"></image>
				<uni-icons class="avatar-edit-icon" type="forward" size="16" color="#999"></uni-icons>
			</view>
		</view>
		
		<!-- 表单 -->
		<view class="form-section">
			<view class="form-item">
				<text class="form-label">用户名</text>
				<view class="form-value">
					<text>{{formData.username}}</text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">昵称</text>
				<view class="form-input">
					<input 
						type="text" 
						v-model="formData.nickname" 
						placeholder="请输入昵称" 
						maxlength="20"
					/>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">手机号</text>
				<view class="form-input">
					<input 
						type="number" 
						v-model="formData.phone" 
						placeholder="请输入手机号" 
						maxlength="11"
					/>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<button class="save-btn" @click="saveProfile">保存修改</button>
	</view>
</template>

<script>
import { updateUserInfo, updateUserAvatar } from '@/api/user.js';
import { getImageUrl } from '@/utils/image.js';
export default {
	data() {
		return {
			formData: {
				username: '',
				nickname: '',
				phone: '',
				avatar: ''
			}
		}
	},
	onLoad() {
		// 加载用户信息
		this.loadUserInfo();
	},
	methods: {
		getImageUrl,
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 加载用户信息
		loadUserInfo() {
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.formData = {
					username: userInfo.username || '',
					nickname: userInfo.nickname || '',
					phone: userInfo.phone || '',
					avatar: userInfo.avatar || ''
				};
			}
		},
		
		// 选择头像
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0];
					this.uploadAvatar(tempFilePath);
				}
			});
		},
		
		// 上传头像
		async uploadAvatar(filePath) {
			uni.showLoading({
				title: '上传中...'
			});
			
			try {
				const res = await updateUserAvatar(filePath);
				if (res.code === 200) {
					this.formData.avatar = res.data;
					
					// 更新本地缓存的用户信息
					const userInfo = uni.getStorageSync('userInfo');
					userInfo.avatar = res.data;
					uni.setStorageSync('userInfo', userInfo);
					
					uni.showToast({
						title: '头像更新成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: res.message || '上传失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('上传头像失败', error);
				uni.showToast({
					title: '上传失败，请稍后重试',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},
		
		// 保存个人资料
		async saveProfile() {
			// 表单验证
			if (this.formData.phone && !/^1\d{10}$/.test(this.formData.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '保存中...'
			});
			
			try {
				// 仅允许修改昵称和手机号
				const updateData = {
					nickname: this.formData.nickname,
					phone: this.formData.phone
				};
				
				const res = await updateUserInfo(updateData);
				if (res.code === 200) {
					// 更新本地缓存的用户信息
					const userInfo = uni.getStorageSync('userInfo');
					userInfo.nickname = this.formData.nickname;
					userInfo.phone = this.formData.phone;
					uni.setStorageSync('userInfo', userInfo);
					
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
					
					// 延迟返回
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: res.message || '保存失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('保存个人资料失败', error);
				uni.showToast({
					title: '保存失败，请稍后重试',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.profile-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 40rpx;
}

.nav-bar {
	display: flex;
	align-items: center;
	height: 90rpx;
	background-color: #fff;
	padding: 0 30rpx;
	position: relative;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.nav-title {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 34rpx;
	font-weight: 500;
	color: #333;
}

.avatar-section {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.avatar-container {
	display: flex;
	align-items: center;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 2rpx solid #eee;
}

.avatar-edit-icon {
	margin-left: 20rpx;
}

.form-section {
	background-color: #fff;
	margin-top: 20rpx;
}

.form-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	width: 160rpx;
	font-size: 30rpx;
	color: #333;
}

.form-value {
	flex: 1;
	font-size: 30rpx;
	color: #999;
}

.form-input {
	flex: 1;
}

.form-input input {
	height: 60rpx;
	font-size: 30rpx;
	color: #333;
	width: 100%;
}

.save-btn {
	width: 90%;
	height: 90rpx;
	line-height: 90rpx;
	background: linear-gradient(to right, #007AFF, #1CB5E0);
	color: #fff;
	font-size: 32rpx;
	border-radius: 45rpx;
	margin-top: 60rpx;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.save-btn:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
</style> 